<template>
  <div
    class="page_body"
    v-loading.fullscreen.lock="loadingKey"
    :element-loading-text="loadingText"
  >
    <!-- 面包屑 -->
    <el-row>
      <el-col :span="24" class="page_box_top">
        <i class="el-icon-s-fold"></i>
        <el-breadcrumb separator="/" class="page_box_top_nav">
          <el-breadcrumb-item class="breadcrumb_active_item"
            >教练员</el-breadcrumb-item
          >
          <el-breadcrumb-item
            :to="{ name: 'refereeCertificationList' }"
            class="breadcrumb_active_item"
            >教练员注册</el-breadcrumb-item
          >
          <el-breadcrumb-item>注册详情</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <div class="certification_detail_content">
        <el-row>
          <el-col :span="24">
            <div class="certification_detail_content_item">
              <el-row>
                <el-col :span="24">
                  <div class="certification_detail_content_item_title">
                    注册信息
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">注册等级:</div>
                    <div>{{ formatterLevelFn(certificationinfo.level) }}</div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">注册时间:</div>
                    <div>{{ certificationinfo.created_at }}</div>
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">审核状态:</div>
                    <div>
                      {{
                        formatterAuditStatusFn(certificationinfo.audit_status)
                      }}
                    </div>
                  </div>
                </el-col>
                <el-col :span="6">
                  <div class="detail_content_item_line_i">
                    <div style="margin-right: 10px">审核时间:</div>
                    <div>{{ certificationinfo.audit_time }}</div>
                  </div>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="24">
            <div class="certification_detail_content_item">
              <el-row>
                <el-col :span="24">
                  <div class="certification_detail_content_item_title">
                    注册详情
                  </div>
                </el-col>
              </el-row>

              <el-row>
                <el-col :span="24">
                  <el-tabs v-model="activeName">
                    <el-tab-pane label="教练员注册" name="referee">
                      <div class="detail_content_tab">
                        <el-row>
                          <el-col :span="6">
                            <div
                              class="detail_content_item_line_i"
                              style="font-weight: bold"
                            >
                              基本信息
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="16">
                            <el-row>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">姓名:</div>
                                  <div>{{ coachData.name }}</div>
                                </div>
                              </el-col>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">性别:</div>
                                  <div>{{ coachData.sex }}</div>
                                </div>
                              </el-col>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">手机号:</div>
                                  <div>{{ coachData.tel }}</div>
                                </div>
                              </el-col>
                            </el-row>

                            <el-row>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">生日:</div>
                                  <div>{{ coachData.brith }}</div>
                                </div>
                              </el-col>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">身高:</div>
                                  <div>{{ coachData.height }}</div>
                                </div>
                              </el-col>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">体重:</div>
                                  <div>{{ coachData.weight }}</div>
                                </div>
                              </el-col>
                            </el-row>
                            <el-row>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px">
                                    工作单位:
                                  </div>
                                  <div>{{ coachData.company }}</div>
                                </div>
                              </el-col>
                              <el-col :span="8">
                                <div class="detail_content_item_line_i">
                                  <div style="margin-right: 10px; width: 40px">
                                    职务:
                                  </div>
                                  <div style="width: 70%">
                                    {{ coachData.position }}
                                  </div>
                                </div>
                              </el-col>
                            </el-row>
                          </el-col>

                          <el-col :span="8">
                            <div class="photo_box">
                              <img
                                class="photo_img"
                                v-if="
                                  coachData.photo != '' &&
                                  coachData.photo != null
                                "
                                :src="coachData.photo"
                                @click="imgViewFn(coachData.photo)"
                              />
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">证件号:</div>
                              <div>{{ coachData.identity_number }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">所属区:</div>
                              <div>{{ coachData.coach_register_region }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">最高学历:</div>
                              <div>{{ coachData.education }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">毕业院校:</div>
                              <div>{{ coachData.school }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">毕业时间:</div>
                              <div>{{ coachData.graduation_date }}</div>
                            </div>
                          </el-col>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">邮箱:</div>
                              <div>{{ coachData.email }}</div>
                            </div>
                          </el-col>
                        </el-row>
                        <el-row>
                          <el-col :span="8">
                            <div class="detail_content_item_line_i">
                              <div style="margin-right: 10px">邮寄地址:</div>
                              <div>{{ coachData.address }}</div>
                            </div>
                          </el-col>
                        </el-row>

                        <el-row>
                          <el-col :span="6">
                            <div
                              class="detail_content_item_line_i"
                              style="font-weight: bold"
                            >
                              专业信息
                            </div>
                          </el-col>
                        </el-row>
                        <div
                          v-for="(item, index) in coach_certificate_info"
                          :key="index"
                        >
                          <el-row>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">培训名称:</div>
                                <div>
                                  {{ item.coach_train_title }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">培训地点:</div>
                                <div>{{ item.coach_train_address }}</div>
                              </div>
                            </el-col>
                            、
                          </el-row>

                          <el-row>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">开始时间:</div>
                                <div>{{ item.coach_train_begin_date }}</div>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">结束时间:</div>
                                <div>{{ item.coach_train_end_date }}</div>
                              </div>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="20">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">
                                  参加培训的证明材料:
                                </div>
                                <div
                                  class="img_box"
                                  v-for="(
                                    items, indexs
                                  ) in item.coach_train_image"
                                  :key="indexs"
                                >
                                  <img
                                    class="identity_img"
                                    v-if="items != '' && items != null"
                                    :src="items"
                                    @click="imgViewFn(items)"
                                  />
                                </div>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div
                          v-for="(item, index) in coach_experience_info"
                          :key="index"
                        >
                          <el-row>
                            <el-col :span="6">
                              <div
                                class="detail_content_item_line_i"
                                style="font-weight: bold"
                              >
                                执教信息{{ index + 1 }}
                              </div>
                            </el-col>
                          </el-row>

                          <el-row>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">执教职务:</div>
                                <div>
                                  {{ item.coach_position }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">开始时间:</div>
                                <div>
                                  {{ item.coach_train_begin_date }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">结束时间:</div>
                                <div>
                                  {{ item.coach_train_end_date }}
                                </div>
                              </div>
                            </el-col>
                          </el-row>

                          <el-row>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">
                                  期间所获成绩及荣誉:
                                </div>
                                <div>{{ item.coach_honor }}</div>
                              </div>
                            </el-col>
                          </el-row>
                          <el-row>
                            <el-col :span="20">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">
                                  成绩及荣誉证明材料:
                                </div>
                                <div
                                  class="img_box"
                                  v-for="(
                                    items, indexs
                                  ) in item.coach_honor_image"
                                  :key="indexs"
                                >
                                  <img
                                    class="identity_img"
                                    v-if="items != '' && items != null"
                                    :src="items"
                                    @click="imgViewFn(items)"
                                  />
                                </div>
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                        <div
                          v-for="(item, index) in coach_certificate_info"
                          :key="index"
                        >
                          <el-row>
                            <el-col :span="6">
                              <div
                                class="detail_content_item_line_i"
                                style="font-weight: bold"
                              >
                                证件信息{{ index + 1 }}
                              </div>
                            </el-col>
                          </el-row>

                          <el-row>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">证书名称:</div>
                                <div>
                                  {{ item.coach_certificate_title }}
                                </div>
                              </div>
                            </el-col>

                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">证书等级:</div>
                                <div>
                                  {{ item.coach_certificate_level }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">证书编号:</div>
                                <div>
                                  {{ item.coach_certificate_number }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="8">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">
                                  证书签发日期:
                                </div>
                                <div>
                                  {{ item.coach_certificate_date }}
                                </div>
                              </div>
                            </el-col>
                            <el-col :span="4">
                              <div class="detail_content_item_line_i">
                                <div style="margin-right: 10px">发证单位:</div>
                                <div>
                                  {{ item.coach_certificate_company }}
                                </div>
                              </div>
                            </el-col>
                          </el-row>

                          <el-row>
                            <el-col :span="16">
                              <div
                                class="detail_content_item_line_i"
                                v-for="(
                                  items, indexs
                                ) in item.coach_certificate_image"
                                :key="indexs"
                              >
                                <div style="margin-right: 10px">证书图片:</div>
                                <img
                                  class="identity_img"
                                  :src="items"
                                  @click="imgViewFn(items)"
                                />
                              </div>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </el-col>
              </el-row>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-row>

    <div class="certification_detail_btn_box" v-if="editKey != 3">
      <el-button type="primary" size="mini" @click="adoptFn()"
        >审核通过</el-button
      >
      <el-button type="danger" size="mini" @click="failFn()"
        >审核不通过</el-button
      >
      <el-button type="info" size="mini" @click="backBtn()"
        >返回上一页</el-button
      >
    </div>

    <!-- 弹窗 -->
    <el-dialog
      :visible.sync="dialogVisible"
      :close-on-click-modal="true"
      width="60vw"
    >
      <img :src="dialogImg" class="dialog_img" />
    </el-dialog>
    <!-- //审核弹窗 -->
    <el-dialog
      :visible.sync="shenhdialog"
      :close-on-click-modal="true"
      width="20vw"
    >
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisiblebut">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<style src="../../assets/css/coach/certificationDetail.css" scoped></style>

<script>
export default {
  name: "CoachCertificationDetail",
  components: {},
  data() {
    return {
      baseAPIUrl: this.$store.state.baseAPIUrl,
      auditStatusList: [
        {
          key: 1,
          value: "待审核认证",
        },
        {
          key: 2,
          value: "已完成审核认证",
        },
        {
          key: 3,
          value: "审核认证不通过",
        },
      ], // 发布状态
      levelList: [
        {
          key: 1,
          value: "E级",
        },
      ], // 等级列表
      loadingKey: false,
      loadingText: "",
      certificationinfo: {},
      coach_certificate_info: [],
      coach_experience_info: [],
      coachData: {},
      activeName: "referee",
      dialogVisible: false,
      dialogImg: "",
      shenhdialog: false,
      form: {
        remark: "",
      },
    };
  },
  created: function () {
    let record_id = this.$route.query.id;
    if (record_id != undefined && record_id != "") {
      this.record_id = record_id;
    }
    this.getDataFn();
  },
  methods: {
    // 获取列表数据
    getDataFn: function () {
      let that = this;
      let url = "/admin/coachregister/show";
      let data = {
        record_id: this.record_id,
      };
      that.loadingText = "加载中...";
      that.loadingKey = true;
      this.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.certificationinfo = response.info;

            that.coachData = response.coach;
            this.coach_certificate_info = response.coach.coach_certificate_info;
            this.coach_experience_info = response.coach.coach_experience_info;
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },

    // 等级格式化
    formatterLevelFn: function (val) {
      let level = val;
      let text = "";
      this.levelList.forEach(function (item) {
        if (item.key == level) {
          text = item.value;
        }
      });
      return text;
    },
    // 审核状态格式化
    formatterAuditStatusFn: function (val) {
      let status = val;
      let text = "";
      this.auditStatusList.forEach(function (item) {
        if (item.key == status) {
          text = item.value;
        }
      });
      return text;
    },
    // 审核通过
    adoptFn: function () {
      let that = this;
      this.$confirm("确认通过该注册申请?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
      }).then(() => {
        let url = "/admin/coachregister/audit";
        let data = {
          record_id: this.record_id,
          status: 1,
        };
        that.loadingText = "处理中...";
        that.loadingKey = true;
        that.axios
          .post(url, data)
          .then((response) => {
            that.loadingKey = false;
            if (response.code == 0) {
              that.$message.success("操作成功");
              that.backBtn();
            } else {
              that.$message.error(response.msg);
            }
          })
          .catch(function (error) {
            that.loadingKey = false;
            console.log(error);
          });
      });
    },
    // 审核不通过
    failFn: function () {
      // this.$confirm("确认拒绝该注册申请?", "提示", {
      //   confirmButtonText: "确定",
      //   cancelButtonText: "取消",
      // }).then(() => {});
      this.shenhdialog = true;
    },
    //审核不通过确认按钮
    dialogVisiblebut() {
      let that = this;
      let url = "/admin/coachregister/audit";
      let data = {
        record_id: this.record_id,
        status: 2,
        remark: this.form.remark,
      };
      that.loadingText = "处理中...";
      that.loadingKey = true;
      that.axios
        .post(url, data)
        .then((response) => {
          that.loadingKey = false;
          if (response.code == 0) {
            that.$message.success("操作成功");
            that.backBtn();
          } else {
            that.$message.error(response.msg);
          }
        })
        .catch(function (error) {
          that.loadingKey = false;
          console.log(error);
        });
    },
    // 查看图片
    imgViewFn: function (url) {
      this.dialogVisible = true;
      this.dialogImg = url;
    },
    // 返回上一页
    backBtn: function () {
      this.$router.replace({
        name: "CoachCertificationList",
      });
    },
  },
};
</script>
